.left {
  padding: 15px;
  overflow: hidden;
  h2 {
    margin-top: 40px;
    margin-bottom: 15px;
    color: salmon;
    text-align: center;
    font-size: 24px;
  }
  h5 {
    font-size: 17px;
    color: salmon;
    .count {
      // display: inline-block;
      color: #909399;
      padding: 0 5px;
      margin-bottom: 18px;
      font-size: 10px;
      font-weight: 500;
      border-radius: 3px;
      background-color: #f5f5f5;
    }
  }
  .child-chain-box {
    padding: 15px 20px 15px 10px;
    .chain-ul {
      display: grid; //grid布局 二维布局
      grid-template-columns: 1fr 1fr 1fr; // fr浮动宽度 是grid 的专用单位，这里表示 一行三个盒子，平均每个盒子占三分之一
      -moz-column-gap: 12px;
           column-gap: 12px; //设置列间距
      row-gap: 12px; // 设置行间距
      gap: 12px; // 统一设置列间和行间距
      align-items: center; //垂直居中 默认是 靠上对齐 end 是靠下对齐
      justify-items: center; // 水平对齐  默认是靠左对齐 end 是靠右对齐 space-between 两端对齐
      // 如果行轨道和列轨道 小于 grid的尺寸 还可以对轨道进行对齐 如下：
      align-content: center; // 轨道垂直居中对齐 end 靠下对齐
      justify-content: center; // 轨道水平居中对齐 end 靠下对齐 space-between 两端对齐
      .chain-li {
        flex: 25%;
        max-width: 300px;
        height: 118px;
        // margin-left: 10px;
        margin-bottom: 10px;
        .chain {
          display: inline-block;
          width: 100%;
          height: 100%;
          background-color: pink;
        }
      }
    }
  }
}

@media screen and (min-width: 1200px) {
  .chain-li {
    max-width: 300px;
    min-width: 260px;
  }
}

// @media screen and (min-width: 1200px) {
//   .chain-li {
//     max-width: 300px;
//     min-width: 260px;
//   }
// }
